/**
 *轻云蒜瓣应用商城面板
 */
Ext.define("PRO.shop.view.usershop.productIntro",{
    extend: 'Ext.panel.Panel',
    border:0,
    alias: 'widget.shop.productIntro',
    autoScroll : true,
    modal : true,
    cls:'accountCon',
    style:'background:#fff',
    padding:20,
   initComponent: function(){
      var me = this;
      me.defaults = {columnWidth:1,border:0}
      me._this = me._this||'';
      var datas  = me.getProductInfo(me._this);
      me.getProductInfo = datas;
      me.items = [
          {
              xtype:'panel',
              layout:'hbox',
              itemId:'accountContop',
              items:[
                  {
                      xtype:'box',
                      width:500,
                      height:400,
                      data:{productImg:datas.productImg},
                      tpl:['<img style="width:100%;height:100%;" src={productImg}>']
                  },
                  {
                      xtype:'panel',
                      width:620,
                      border:0,
                      itemId:'accountContopRight',
                      margin:'0 20 20 20',
                      items:[
                          {
                              xtype:'box',
                              itemId:'planBox',
                              data:datas,
                              tpl:[
                                  '<div>',
                                  '<h3 class="detail-tit">{productName}<span>如需定制购买方案可联系客服<i>400-0999235</i></span></h3>',
                                //   '<p class="detail-little-tit">专注于大客户销售实现的全流程，轻松搞定大客户</p>',
                                  // '<p class="detail-charge"><span>价格：</span><span>￥<tpl if="datas.productInfo">{productInfo.obj.productInfo.values.CP_MONEY}<tpl  else>0</tpl></span></p>',
                                  '<p class="buyTit">购买方案</p>',
                                  '<div class="buyRightnow">',
                                  '<tpl if="plan.length">',
                                  '<tpl for="plan">',
                                    '<tpl if="!enabled">',
                                        '<div class="planBuy planBuyflex <tpl if="index==1"><tpl if="dis">activePlanbuyorg<tpl else> activePlanbuy</tpl></tpl>" data-dis="{dis}"  data-year="{buyYear}" data-otherpay={buyMoney} data-schemeid={schemeId}>',
                                                '<tpl if="dis"><img class="discount" src="'+JE.buildCdnUrl('/pro/shop/resourse/discount.png')+'"></tpl>',
                                                '<p class="planBuyP" >',
                                                    '<font class="buyMoney">{buyYear}</font>',
                                                    '<font class="buyYear">¥{buyMoney}</font>',
                                                '</p>',
                                                '<tpl if="dis"><span class="discountBg">{discount}</span></tpl>',
                                        '</div>',
                                        '<tpl else>',
                                        '<div class="planBuyflexNot" data-dis="{dis}"  data-year="{buyYear}" data-otherpay={buyMoney} data-schemeid={schemeId}>',
                                                '<tpl if="dis"><img class="discount" src="'+JE.buildCdnUrl('/pro/shop/resourse/discount.png')+'"></tpl>',
                                                '<p class="planBuyP" >',
                                                    '<font class="buyMoney">{buyYear}</font>',
                                                    '<font class="buyYear">¥{buyMoney}</font>',
                                                '</p>',
                                                '<tpl if="dis"><span class="discountBg">{discount}</span></tpl>',
                                        '</div>',
                                    '</tpl>',
                                  '</tpl>',
                                  '<tpl else>',
                                      '<p style="font-size:12px;color:red">暂无购买方案</p>',
                                  '</tpl>',
                                  '</div>',
                                  '<p class="buyTit">使用名额</p>',
                                  '<p style="font-size:12px;color:#B3B3B3; margin-top:-10px;"><span style="font-size:16px;color:#111;">{personNum}人</span>（购买本产品默认赠送15名免费使用额，如需扩充使用人数，需单独购买产品“使用名额”）</p>',
                              ]
                          },
                        {
                            xtype:'panel',
                            layout:'vbox',
                            border:0,
                            itemId:'topPanel',
                            columnWidth:1,
                            hidden:datas.winName,
                            defaults:{
                                width:'100%'
                            },
                            items:[{
                                xtype:'container',
                                height: 40,
                                margin:'0 20 10 0',
                                layout: {
                                    type:'hbox',
                                    pack:'end'
                                },
                                itemId:'containerview',
                                items:[
                                {
                                    xtype:'box',
                                    margin:'7 0 0 0',
                                    html:'<i class="jeicon jeicon-minus-line" style="color:#DDDDDD;cursor:pointer;margin-left:-5px;"></i>',
                                    listeners:{
                                        afterRender:function(view){
                                            view.getEl().on('click',function(e){
                                                if(e.getTarget('.jeicon-minus-line',1)){
                                                    var topPanel=me.getCmp('accountContop').getCmp('accountContopRight').getCmp('topPanel').getCmp('containerview');
                                                    var number=topPanel.getCmp('number')
                                                    var sliderfieldview=me.getCmp('accountContop').getCmp('accountContopRight').getCmp('topPanel').getCmp('sliderfieldview');
                                                    var val=number.getValue();
                                                    var newVal=val-10;
                                                    if(newVal<10)return;
                                                    sliderfieldview.setValue(newVal);
                                                    number.setValue(newVal);
                                                }
                                             });

                                        }
                                    }
                                },{
                                    xtype:'numberfield',
                                    itemId:'number',
                                    value:10,
                                    width:50,
                                    hideTrigger:true,
                                    minValue:10,
                                    maxValue:datas.maxNumbers,
                                    step:10,
                                    listeners:{
                                        change:function(field,newVal,oldVal){
                                            var topPanel=me.getCmp('accountContop').getCmp('accountContopRight').getCmp('topPanel').getCmp('containerview');
                                            var sliderfieldview=me.getCmp('accountContop').getCmp('accountContopRight').getCmp('topPanel').getCmp('sliderfieldview');
                                            sliderfieldview.setValue(newVal);
                                        }
                                    }
                                },
                                {
                                    xtype:'box',
                                    margin:'7 0 0 0',
                                    html:'<i class="jeicon jeicon-plus" style="color:#DDDDDD;margin-left:5px;cursor:pointer;"></i>',
                                    listeners:{
                                        afterRender:function(view){
                                            view.getEl().on('click',function(e){
                                                if(e.getTarget('.jeicon-plus',1)){
                                                    var topPanel=me.getCmp('accountContop').getCmp('accountContopRight').getCmp('topPanel').getCmp('containerview');
                                                    var number=topPanel.getCmp('number')
                                                    var sliderfieldview=me.getCmp('accountContop').getCmp('accountContopRight').getCmp('topPanel').getCmp('sliderfieldview');
                                                    var val=number.getValue();
                                                    var newVal=val+10;
                                                    sliderfieldview.setValue(newVal);
                                                    number.setValue(newVal);
                                                    //此处处理更改函数；
                                                    me.changeLab(newVal)
                                                }
                                             });

                                        }
                                    }
                                }
                            ]
                            },{
                                xtype:'sliderfield',
                                itemId:'sliderfieldview',
                                cls:'je-pf-field-slider',//je-field-slider
                                margin:'0 10 40 15',
                                value:10,
                                increment:10,
                                height:10,
                                minValue:10,
                                maxValue:datas.maxNumbers,
                                useTips: false,
                                autoShow:false,
                                listeners:{
                                    change:function(slider,newValue,thumb,eOpts){
                                        var topPanel=me.getCmp('accountContop').getCmp('accountContopRight').getCmp('topPanel').getCmp('containerview');
                                        var number=topPanel.getCmp('number');
                                        number.setValue(newValue);
                                        var pfcase=slider.getEl().down('.pfcase');
                                        slider.tipTextEl.el.dom.innerText=newValue;
                                        var sliderthumb=slider.getEl().down('.x-slider-thumb');
                                        var sliderthumbStyle=(newValue/datas.maxNumbers)*100+"%";
                                        var pfslider=slider.getEl().down('.pfslider');
                                        var sliderthumbStyletip=((newValue/datas.maxNumbers)*100)+"%";
                                        slider.tipEl.setStyle({width:sliderthumbStyletip});
                                        me.changeLab(newValue)
                                    },
                                    afterrender:function(field,eOpts){
                                        var sliderinner=this.getEl().down('.x-slider-inner');
                                        var xslider=this.getEl().down('.x-slider');
                                        var sliderthumb=this.getEl().down('.x-slider-thumb');
                                        sliderthumb.setStyle({'z-index':10000,'left':((15/datas.maxNumbers)*100)+'100%'})
                                        var horz=this.getEl().down('.x-slider-horz');
                                        horz.setStyle({'pointer-events':'all'});
                                        field.tipEl = sliderinner.insertHtml('beforeEnd','<div class="pfcase"><div class="pfslider"></div><div class="tip-text pfcasedown">10</div></div>',true)
                                        field.tipTextEl = field.tipEl.down('.tip-text');
                                        field.tipEl.alignTo(field.thumbs[0].el, 'bc', [0,-10]);
                                        field.pfsliderEl=this.getEl().down('.pfslider');
                                        var pfcase = this.getEl().down('.pfcase');
                                        pfcase.setStyle({left:0,top:0});
                                    }
                                }
                            }]
                        },
                          {
                              xtype:'button',
                              text:'立即购买',
                              border:0,
                              width:130,
                              height:40,
                              hidden:me.isbtnShow,
                              cls:'buyNow btn JEPLUS_B_L10',
                              margin:'20 0 0 0 ',
                              style:'background: rgb(255,51,52);',
                              handler:function(btn){
                                  var winName = datas.productInfo.obj.productInfo.values.CP_CPTYPE_CODE;
                                  var topPanel=me.getCmp('accountContop').getCmp('accountContopRight').getCmp('topPanel').getCmp('containerview');
                                  var number=topPanel.getCmp('number');
                                  var selectedPre = number.getValue();
                                  //此处传值给弹出框   传一个购买方案的id和人数就足够了
                                  JE.win({
                                      xtype:'panel',
                                      title:'订单确认',
                                      layout:'fit',
                                      width:840,//JE.getBodyWidth()-750,
                                      height:(JE.getBodyHeight()-300)>=563?JE.getBodyHeight()-300:563,//563
                                      border:0,
                                      bodyPadding:'20px 40px',
                                      default:{border:0},
                                      items:[{xtype:'shop.shoppayview',winName:winName=='MENUP'?false:true,resData:datas.productInfo,name:datas.productName,type:'save',selectedPre:datas.winName?'':selectedPre,selectedSchemeId:me.schemeId,beforeSel:me.beforeSel}]
                                  }).show()
                              }
                          }
                      ]
                  }//详情购买部分
              ]
          },
          {
              xtype:'box',
              data:{html:JE.isEmpty(datas.productInfo)?'':Ext.htmlDecode(datas.productInfo.obj.productInfo.values.CP_MS)},//datas.productInfo.obj.productInfo.values.CP_MS
              tpl:['{html}']
          }//详情部分
      ];
      me.callParent(arguments);
   },
   afterRender:function(){
      var me = this;
      me.callParent(arguments);
      me.body.on('click',function(e){
          if(e.getTarget('.planBuy',3)){
              //购买方案
              var planBuy = e.getTarget('.planBuy',3);
              var needPay = planBuy.getAttribute('data-otherpay');
              var schemeId = planBuy.getAttribute('data-schemeid');
              var dis = planBuy.getAttribute('data-dis');
              var year = planBuy.getAttribute('data-year');
              var otherPlan = document.getElementsByClassName('planBuy');
              me.schemeId = schemeId;
              me.beforeSel = {
                needPay:needPay,
                year:year,
                selected:false,
                payTypeName:'账户余额',
                payTypeCode:'10'
              }
              for(var i= 0 ;i<otherPlan.length;i++){
                  otherPlan[i].setAttribute('class','planBuy planBuyflex')
              }
              if(dis=='true'){
                  planBuy.setAttribute('class','planBuy planBuyflex activePlanbuyorg')
              }else{
                  planBuy.setAttribute('class','planBuy planBuyflex activePlanbuy')
              }
          }
      })
   },
   getProductInfo:function(setDis){
       var me = this;
       var planInfo = JE.ajax({
          url:'/je/shoppingmall/bill/getBillSnapshot',
          params:{
             productId:me.productId||''
          }
       });
       if(planInfo.success){
          var plan = [],Tteam=[];
          var allInfo = planInfo.obj;
          Ext.each(allInfo.schemeInfo,function(planItem,index){
            if(planItem.values.enabled=='T'){
                Tteam.push({
                    text:index+1,
                    dis:!JE.isEmpty(me.setDis(planItem.values.coefficient)),
                    discount:(me.setDis(planItem.values.coefficient))*10+'折',
                    buyYear:planItem.values.timeLength+planItem.values.timeUnitName,
                    buyMoney:me.setNumStyle(planItem.values.schemePrice),
                    index:'',
                    schemeId:planItem.values.schemeId,
                    enabled:planItem.values.enabled=='F'?true:false,
                });
            }
              plan.push({
                  text:index+1,
                  dis:!JE.isEmpty(me.setDis(planItem.values.coefficient)),
                  discount:(me.setDis(planItem.values.coefficient))*10+'折',
                  buyYear:planItem.values.timeLength+planItem.values.timeUnitName,
                  buyMoney:me.setNumStyle(planItem.values.schemePrice),
                  index:planItem.values.enabled=='T'&&Tteam.length==1?1:'',
                  schemeId:planItem.values.schemeId,
                  enabled:planItem.values.enabled=='F'?true:false
              });
          })
          if(JE.isEmpty(Tteam)){
            Ext.each(plan,function(item,index){
                item.index = index+1;
            })
          }
          var data = {
              productName:allInfo.productInfo.values.CP_MC,
              productImg:'/je/doc/document/doLoadFile?jeFileType=PROJECT&path='+allInfo.productInfo.values.CP_TB.split('*')[1],
              plan:plan,
              personNum:allInfo.peekValue,//人员数量
              Tteam:Tteam,
              maxNumbers:Number(allInfo.maxNumbers)-Number(allInfo.peekValue),
              productInfo:planInfo,
              winName:allInfo.productInfo.values.CP_CPTYPE_CODE=="MENUP"?false:true,
           }
           return data;
       }else{
          var data = {
              productName:'',
              productImg:'',
              plan:'',
              productInfo:''
           }
          return data;
       }
   },
   setDis:function(charge){
      if(Number(charge)==0||Number(charge)==1){
          var dis = '';
      }else{
          var dis = Number(charge);
      }
      return dis
  },
  changeLab:function(newVal){
    var me = this;
    JE.ajax({
        url:'/je/shoppingmall/bill/getPersonPriceStragegy',
        params:{
            productId:me.getProductInfo.productInfo.obj.productInfo.pkValue,
            limitNumbersInput:newVal
        },
        success:function(res){
            var res = JSON.parse(res.responseText);
            if(res.success){
                var plan = [],Tteam=[];
                Ext.each(res.obj.schemeInfo,function(planItem,index){
                    if(planItem.values.enabled=='T'){
                        Tteam.push({
                            text:index+1,
                            dis:!JE.isEmpty(me.setDis(planItem.values.coefficient)),
                            discount:(me.setDis(planItem.values.coefficient))*10+'折',
                            buyYear:planItem.values.timeLength+planItem.values.timeUnitName,
                            buyMoney:me.setNumStyle(planItem.values.schemePrice),
                            index:'',
                            schemeId:planItem.values.schemeId,
                            enabled:planItem.values.enabled=='F'?true:false,
                        });
                    }
                    plan.push({
                        text:index+1,
                        dis:!JE.isEmpty(me.setDis(planItem.values.coefficient)),
                        discount:(me.setDis(planItem.values.coefficient))*10+'折',
                        buyYear:planItem.values.timeLength+planItem.values.timeUnitName,
                        buyMoney:me.setNumStyle(planItem.values.schemePrice),
                        index:planItem.values.enabled=='T'&&Tteam.length==1?1:'',
                        schemeId:planItem.values.schemeId,
                        enabled:planItem.values.enabled=='F'?true:false
                    });

                })
            };
            var datas = me.getProductInfo;
            datas.Tteam = Tteam;
            datas.plan = plan;
            me.getCmp('accountContop').getCmp('accountContopRight').getCmp('planBox').update(datas);
        }
    })
    },
    setNumStyle:function(num){
        num = num.toString();
        if(num.includes('.')){
           if(num.substr(num.indexOf('.')+1).length==2){
               return num
           }else{
           return num = num+'0';
           }
        }else{
           return num= num+'.00';
        }
    }
});
